<script setup>
  import { ref, reactive, toRefs, onMounted } from "vue";
  import { useRoute, useRouter } from 'vue-router'
  import {postTagAddGroup} from '@/api'
  // import { ru } from "element-plus/es/locale";
  const route = useRoute()
  const router = useRouter()
  const userId = ref('')
  onMounted(()=>{
    userId.value = route.query.id
      console.log("获取到的参数",userId );
  })
  const ruleFormRef = ref()
  const ruleForm = reactive({
    biaoqianname:'',
    rule: [ 
      { name: '' }
    ]
  });

   //添加群标签列表接口信息
  const onSubmit = async (formEl) => {
    console.log(formEl)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
          if (valid) {
         console.log('添加',ruleForm.rule)
         if(ruleForm.rule == ''){
          alert('标签名称不能为空')
         }else{}
          var data = []
        for(var i =0;i<ruleForm.rule.length;i++){
          data.push(ruleForm.rule[i].name)
        }
        postTagAddGroup({
          groupName:ruleForm.biaoqianname,
          tag:data
        }).then((res) => {
          console.log(res, '3333')
          ElMessage({ message: '提交成功', type: 'success' })
          router.push('customerLabel')
        })  
      } else {
        console.log('error submit!', fields)
        ElMessage({ message: '失败', type: 'error' })
      }	
    })
    
  }
  // 取消按钮
  const cancelSubmit =()=>{
    ElMessage({ message: '取消成功', type: 'success' })
          router.push('customerLabel')
  }
  // 添加子标签
  const addInput = () => {
    ruleForm.rule.push({ name: '' })
  }
  const deleteInput = (index) => {
    ruleForm.rule.splice(index, 1)
  }
  // 弹窗上移
  const popUp = (index) => {
    if (index != 0) {
      ruleForm.rule[index] = ruleForm.rule.splice(index - 1, 1, ruleForm.rule[index])[0];
    } else {
      ruleForm.rule.push(ruleForm.rule.shift());
    }
  }
  // 弹窗下移
  const popDown = (index) => {
    if (index != ruleForm.rule.length - 1) {
      ruleForm.rule[index] = ruleForm.rule.splice(index + 1, 1, ruleForm.rule[index])[0];
    } else {
      ruleForm.rule.unshift(ruleForm.rule.splice(index, 1)[0]);
    }
  }
  
  </script>
  <template>
    <!-- 修改标签组弹窗 -->
    <div class="allStyle">
      <div class="dialogTSY">
          <el-icon style="color:#409eff">
            <BellFilled />
          </el-icon>
          <span style="color: #595959;">管理员可根据不同部门选择展示不同的标签组，部门管理员可创建部门可见的标签</span>
      </div>
      <div class="formStyle">
        <el-form ref="ruleFormRef" :model="ruleForm" >
          <el-form-item label="标签组名称:" label-width="150px" style="width: 500px">  
            <el-input v-model="ruleForm.biaoqianname" autocomplete="off" show-word-limit maxlength="15" />
          </el-form-item>
          <el-form-item label="标签名称:"  label-width="150px">
            <div style="display: flex;" class="content-item" v-for="(item, index) in ruleForm.rule" :key="index">
              <span>
                <el-input v-model="item.name"  autocomplete="off" style="margin-bottom: 10px;width: 350px;" show-word-limit
                  maxlength="15" />
              </span>
              <span style="" v-if="ruleForm.rule.length !== 1">
                <el-icon style="margin-left: 10px" @click="deleteInput(index)">
                  <Remove />
                </el-icon>
                <span style="margin-left: 10px" @click="popUp(index)">
                  <i class="iconfont"> &#xe61c;</i>
                </span>
                <span style="margin-left: 10px" @click="popDown(index)">
                  <i class="iconfont"> &#xe61b;</i>
                </span>
              </span>
            </div>
          </el-form-item>
          <el-form-item label-width="150px" @click="addInput">
            <p style="display: flex;margin-top: -10px;">
              <el-icon color="#1890ff">
                <CirclePlus />
              </el-icon>
            <p style="color: #1890ff;margin-top: -9px;margin-left: 3px;">添加标签</p>
            </p>
          </el-form-item>
        </el-form>
      </div>
      <div class="addBottmStyle">
        <el-button @click="cancelSubmit">取消</el-button>
        <el-button  type="primary" @click="onSubmit(ruleFormRef)" >确定</el-button>
      </div>
    </div>
    </template>
  
  <style scoped>
  @import "../../../style/iconfont.css";
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .allStyle {
    background-color: #ffffff;
    margin: 20px;
  }
  
  .dialogTSY {
    margin: 20px;
    display: flex;
    align-items: center;
    background-color: #effaff;
    padding: 8px 10px;
  }
  .dialogTSY span{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    margin-left: 5px;
  }
  .formStyle {
    width: 700px;
    margin-top: 20px;
  }
  
  .addBottmStyle {
    float: left;
    margin-left: 30%;
    margin-bottom: 20px;
  }
  </style>